<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="../dojo/dijit/themes/claro/claro.css">

    <script>dojoConfig = {parseOnLoad: true}</script>
    <script src='../dojo/dojo/dojo.js'></script>

    <script>
        require(["dojo/parser", "dijit/CalendarLite"]);
        require(["dijit/InlineEditBox", "dijit/form/Textarea", "dojo/domReady!"], function(InlineEditBox, Textarea){
            var eb = new InlineEditBox({
                editor: Textarea,
                name: "param1",
                autoSave: false
            }, "param1");
        });
        require(["dijit/InlineEditBox", "dijit/form/Textarea", "dojo/domReady!"], function(InlineEditBox, Textarea){
            var eb = new InlineEditBox({
                editor: Textarea,
                name: "param2",
                autoSave: false
            }, "param2");
        });
    </script>
    <link rel="stylesheet" href="../dojo/dijit/themes/claro/claro.css">
    <style type="text/css">
        @import "../dojo/dojo/resources/dojo.css";
        @import "../dojo/dijit/themes/claro/claro.css";
        @import "../dojo/dojox/grid/enhanced/resources/claro/EnhancedGrid.css";
        @import "../dojo/dojox/grid/enhanced/resources/EnhancedGrid_rtl.css";

        /*Grid need a explicit width/height by default*/
        #grid {
            width: 45em;
            height: 20em;
        }
    </style>


    <script>
        dojo.require("dojox.grid.EnhancedGrid");
        dojo.require("dojo.data.ItemFileWriteStore");
        dojo.require("dojox.grid.DataGrid");
        dojo.require("dojo.data.ItemFileWriteStore");
        dojo.require("dijit.form.Button");
        dojo.ready(function(){
            /*set up data store*/
            var data = {
                identifier: 'id',
                items: []
            };
            var data_list = [
                { col1: "normal", col2: false, col3: 'But are not followed by two hexadecimal', col4: 29.91},
                { col1: "important", col2: false, col3: 'Because a % sign always indicates', col4: 9.33},
                { col1: "important", col2: false, col3: 'Signs can be selectively', col4: 19.34}
            ];
            var rows = 60;
            for(var i=0, l=data_list.length; i<rows; i++){
                data.items.push(dojo.mixin({ id: i+1 }, data_list[i%l]));
            }
            var store = new dojo.data.ItemFileWriteStore({data: data});

            /*set up layout*/
            var layout = [[
                    {'name': 'Column 1', 'field': 'id'},
                    {'name': 'Column 2', 'field': 'col2'},
                    {'name': 'Column 3', 'field': 'col3', 'width': '230px'},
                    {'name': 'Column 4', 'field': 'col4', 'width': '230px'}
                ]];

            /*create a new grid:*/
            var grid = new dojox.grid.EnhancedGrid({
                id: 'grid',
                store: store,
                structure: layout,
                rowSelector: '20px'},
            document.createElement('div'));

            /*append the new grid to the div*/
            dojo.byId("gridDiv").appendChild(grid.domNode);

            /*Call startup() to render the grid*/
            grid.startup();
        });


        //-----------------------
        dojo.require("dijit.form.Form");
        dojo.require("dijit.form.ValidationTextBox");
        dojo.require("dijit.form.Textarea");
        dojo.require("dijit.form.Button");

        dojo.addOnLoad( function () {
            var form = new dijit.form.Form({
                method: "POST",
                action: "create"
            }, "createCollectionForm");
            var title = new dijit.form.ValidationTextBox({
                required: true,
                name: "param1",
                trim: true
            }, "title");
            var description = new dijit.form.Textarea({
                trim: true
            }, "description");
            var submit = new dijit.form.Button({
                label: "OK",
                onClick: function(event) {
                    dijit.byId("createCollectionForm").submit();
                }
            }, "submit");
        });
    
        require(["dojo/parser", "dijit/form/Form", "dijit/form/Button", "dijit/form/ValidationTextBox", "dijit/form/DateTextBox"]);
        require(["dojo/request", "dojo/dom", "dojo/dom-construct", "dojo/json", "dojo/on", "dojo/domReady!"],
        function(request, dom, domConst, JSON, on){
            on(dom.byId("startButton"), "click", function(){
      
                //domConst.place("<p>Requesting...</p>", "output");
                var out = document.getElementById("output");
                out.innerHTML="<p>Requesting...</p>";
                //request("request/helloworld.json").then(function(text){
                //request("create?param1=fromdojo1&param2=fromdojo2").then(function(text){
                request("sel").then(function(text){
                    //domConst.place("<p>response: <code>" + text + "</code>", "output");
                    out.innerHTML=text;
                });
            });
        });
    
    </script>
</head>
<body class="claro">

    <hr/>
    <script>
        require(["dojo/parser", "dijit/layout/TabContainer", "dijit/layout/ContentPane"]);
                
                
                
    </script>
    <div style="height: 105px;">
        <div data-dojo-type="dijit/layout/TabContainer" style="width: 100%;" doLayout="false">
            <div data-dojo-type="dijit/layout/ContentPane" title="My first tab" data-dojo-props="selected:true">
                Lorem ipsum and all around...
            </div>
            <div data-dojo-type="dijit/layout/ContentPane" title="My second tab" data-dojo-props="closable:true">
                Lorem ipsum and all around - second...<br />
                Hmmm expanding tabs......
            </div>
            <div data-dojo-type="dijit/layout/ContentPane" title="My last tab">
                Lorem ipsum and all around - last...<br />
                <br />
                <br />
                Hmmm even more expanding tabs......
            </div>
        </div>
    </div>              
    <hr/>
    <hr/>
    <div data-dojo-type="dijit/form/Form" id="myForm" data-dojo-id="myForm"
         encType="multipart/form-data" action="create" method="get">
        <script type="dojo/on" data-dojo-event="reset">
            return confirm('Press OK to reset widget values');
        </script>

        <script type="dojo/on" data-dojo-event="submit">
            if(this.validate()){
            return confirm('Form is valid, press OK to submit');
            }else{
            alert('Form contains invalid data.  Please correct first');
            return false;
            }
            return true;
        </script>

        <table style="border: 1px solid #9f9f9f;" cellspacing="10">
            <tr>
                <td>
                    <label for="name">Name:</label>
                </td>
                <td>
                    <input type="text" id="name" name="param1" required="true" data-dojo-type="dijit/form/ValidationTextBox"/>
                </td>
            </tr>
            <tr>
                <td>
                    <label for="dob">Date of birth:</label>
                </td>
                <td>
                    <input type="text" id="dob" name="param2" data-dojo-type="dijit/form/DateTextBox"/>
                </td>
            </tr>
        </table>

        <button data-dojo-type="dijit/form/Button" type="button" onClick="console.log(myForm.getValues())">Get Values from form!</button>
        <button data-dojo-type="dijit/form/Button" type="submit" name="submitButton" value="Submit">Submit</button>
        <button data-dojo-type="dijit/form/Button" type="reset">Reset</button>
    </div>
    <hr/>
    <h1>Output:</h1>
    <div id="output"></div>
    <button type="button" id="startButton">Start</button>
    <br/>
    <div data-dojo-type="dijit/CalendarLite">
        <script type="dojo/method" data-dojo-event="onChange" data-dojo-args="value">
            require(["dojo/dom", "dojo/date/locale"], function(dom, locale){
            dom.byId('formatted').innerHTML = locale.format(value, {formatLength: 'full', selector:'date'})
            });
        </script>
    </div>
    <p id="formatted"></p>

    <div id="console">
        ---</div>
    <div id="gridDiv"></div>

    <hr/>
    <form action="create" method="post"> 
        <div id="param1" >
            Правь!
        </div>
        <div id="param2" >
            Правь!
        </div>
        <input type="submit" />
    </form>
    <hr/>
    <form method="post" action="" enctype="application/x-www-form-urlencoded" id="createCollectionForm">
        <dl class="zend_form">
            <dt id="title-label"><label class="required" for="title">Title:</label></dt>
            <dd id="title-element">
                <input type="text" value="" id="title" name="title" gtbfieldid="1"></dd>
            <dt id="description-label"><label class="optional" for="description">Description:</label></dt>
            <dd id="description-element">
                <textarea cols="80" rows="24" id="description" name="description"></textarea></dd>
            <dt id="submit-label">&nbsp;</dt><dd id="submit-element">
                <input type="submit" value="OK" id="submit" name="submit"></dd>
        </dl>
    </form>
	<script type="text/javascript">
  dojo.require("dijit.Dialog");
  dojo.require("dijit.form.TextBox");  
  dojo.require("dijit.form.TimeTextBox");
  dojo.require("dijit.form.Button");
  dojo.require("dijit.form.DateTextBox");
  dojo.require("dijit.form.FilteringSelect");
</script>

<div dojoType="dijit.form.DropDownButton">
  <span>Show Tooltip Dialog</span>
  <div dojoType="dijit.TooltipDialog" id="tooltipDlg" title="Enter Login information"
    execute="alert('submitted w/args:\n' + dojo.toJson(arguments[0], true));">
    <table>
      <tr>
        <td><label for="user">User:</label></td>
        <td><input dojoType=dijit.form.TextBox type="text" name="user" id="user"></td>
      </tr>
      <tr>
        <td><label for="pwd">Password:</label></td>
        <td><input dojoType=dijit.form.TextBox type="password" name="pwd" id="pwd"></td>
      </tr>
      <tr>
        <td><label for="date2">Date:</label></td>
        <td><input dojoType=dijit.form.DateTextBox name="date" id="date2"></td>
      </tr>
      <tr>
        <td><label for="time2">Time:</label></td>
        <td><input dojoType=dijit.form.TimeTextBox name="time" id="time2"></td>
      </tr>
      <tr>
        <td><label for="combo">Pizza:</label></td>
        <td>
          <select dojoType=dijit.form.FilteringSelect name="combo" id="combo" hasDownArrow="true">
            <option value="cheese">cheese</option>
            <option value="pepperoni">pepperoni</option>
            <option value="sausage">sausage</option>
          </select>
        </td>
      </tr>
      <tr>
        <td colspan="2" align="center">
          <button dojoType=dijit.form.Button type="submit" name="submit">Order</button>
        </td>
      </tr>
    </table>
    <div style="width: 300px;">Note: This tooltip dialog has a bunch of nested drop downs for testing keyboard and click handling</div>
  </div>
</div>
	
    http://dojotoolkit.org/reference-guide/1.9/dijit/form/DateTextBox.html
</body>
</html>